mat-icon.avatar{
  overflow: hidden;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 12px;
  order: 3;
}
.priorty-normal{
  border-left: 3px solid #a6a6a6;
}
.priorty-important{
  border-left: 3px solid #ffaf38;
}
.priorty-emergency{
  border-left: 3px solid #e4393c;
}

.due-date{
  background-color: #ff4f3e;
  color: #fff;
}
.completed{
  opacity: .64;
  color: #d9d9d9;
  text-decoration: line-through;
}
.alarm{
  font-size: 18px ;

}
.bottom-bar{
  margin-top: 3px;
  margin-bottom: 2px;
  font-size: 18px;
  width: 100%;
  order: 1;
}
.content{
  order: 1;
  width: 100%;
  padding: 5px;
}
.container{
  width:100%;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.drag-start{
  opacity: .5;;
  border:2px dashed #ff525b;
}
:host{
  width: 100%;
}
.completion-status{
  order: -1;
}
